<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>A Colorful Clock With CSS &amp; jQuery | Tutorialzine demo</title>

<link rel="stylesheet" type="text/css" href="<%=path %>/jslib/clock/styles.css" />

<script type="text/javascript" src="<%=path %>/jslib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path %>/jslib/clock/jquery.tzineClock/jquery.tzineClock.js"></script>

<script type="text/javascript" src="<%=path %>/jslib/clock/script.js"></script>
<style type="text/css">
.clock{
	/* The .clock div. Created dynamically by jQuery */
	background-color:#252525;
	height:200px;
	width:200px;
	position:relative;
	overflow:hidden;
	float:left;
}

.clock .rotate{
	/* There are two .rotate divs - one for each half of the background */
	position:absolute;
	width:200px;
	height:200px;
	top:0;
	left:0;
}

.rotate.right{
	display:none;
	z-index:11;
}

.clock .bg, .clock .front{
	width:100px;
	height:200px;
	background-color:#252525;
	position:absolute;
	top:0;
}

.clock .display{
	/* Holds the number of seconds, minutes or hours respectfully */
	position:absolute;
	width:200px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	z-index:20;
	color:#F5F5F5;
	font-size:60px;
	text-align:center;
	top:65px;
	left:0;
	
	/* CSS3 text shadow: */
	text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(<%=path %>/jslib/clock/jquery.tzineClock/img/bg_blue.png) no-repeat right top; }


.clock .front.left{
	left:0;
	z-index:10;
}

</style>
</head>

<body>
<div id="fancyClock"></div>
</body>
</html>

